<template>
  <div class="content">
    <md-preview
      :editor-id="props.editorId"
      theme="github"
      :model-value="props.modelValue"
      preview-theme="default"
      language="zh-CN"
      :show-code-row-number="props.showCodeRowNumber"
      code-theme="atom"
      :code-foldable="false"
      @on-html-changed="onHtmlChanged"
      @on-get-catalog="onGetCatalog"
    />
  </div>
</template>

<script lang="ts">
export default { name: 'IzPreviewContent' };
</script>

<script setup lang="ts">
import type { PropType } from 'vue';
import { MdPreview } from 'md-editor-v3';
import { debounce } from '@vavt/util';
// import type { StateType } from '@/store';
// const store = useStore<StateType>();

const props = defineProps({
  editorId: {
    type: String as PropType<string>,
    default: ''
  },
  modelValue: {
    type: String as PropType<string>,
    default: ''
  },
  showCodeRowNumber: {
    type: Boolean as PropType<boolean>,
    default: true
  }
});

const onHtmlChanged = debounce(() => {
  const { hash } = location;

  if (/^#/.test(hash)) {
    const headingId = decodeURIComponent(hash.replace('#', ''));

    if (headingId) {
      const targetHeadDom = document.getElementById(headingId);

      if (targetHeadDom) {
        const scrollLength = (targetHeadDom as HTMLHeadElement).offsetTop + 414 - 10;

        window.scrollTo({
          top: scrollLength,
          behavior: 'smooth'
        });
      }
    }
  }
});

const onGetCatalog = (catalogs: string[]) => {
  console.log('catalogs', catalogs);
};
</script>
